import React, {Component} from 'react'
import style from './Log.module.scss'
import LogList from './VipLogList'
import {connect} from "react-redux";
import {removeEmptyField} from '../../compoent/emptyFild'

import {Button, Form, Input, Select} from 'antd';


class VipLog extends Component {
    state = {
        newValues:{},
    }

    onFinish = (values) => {
        values.page = 1
        values.size = 10
        let newValues = removeEmptyField(values)
        this.setState(newValues)
        this.props.vipLogList(newValues)
    };
    onFinishFailed = (errorInfo) => {

    };

    render() {
        return (
            <div>
                <div className={style.top}>
                    <Form
                        style={{marginTop: 20, marginLeft: 20}}
                        name="basic"
                        layout='inline'
                        onFinish={this.onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            style={{width: 320}}
                            label="姓名："
                            name="name"
                        >
                            <Input placeholder='姓名'/>
                        </Form.Item>
                        <Form.Item
                            style={{width: 320}}
                            label="昵称："
                            name="nickName"
                        >
                            <Input placeholder='昵称'/>
                        </Form.Item>
                        <Form.Item
                            style={{width: 320}}
                            label="用户ID："
                            name="mId"
                        >
                            <Input placeholder='输入Id'/>
                        </Form.Item>


                        <Form.Item style={{marginLeft: 0, marginTop: 0}}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" htmlType='reset' style={{marginLeft: 30}}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className={style.middle}>
                    <LogList newValues={this.state.newValues} />
                </div>

            </div>
        )
    }
}

const mapState = state => ({
    ...state.vip

});

const mapDispatch = dispatch => ({
    ...dispatch.vip
})

export default connect(mapState, mapDispatch)(VipLog);